<script setup lang="ts">

import {TypeList} from "~/data/ai/workeditdata";

interface Props {
  categroies:any[]
  categoryLabel?:string
  categoryValue?:string|number
  items:any[]
  itemValue?:string|number
  itemLabel?:string
  joinKey?:string  //items and categroies join key
}

const props = withDefaults(defineProps<Props>(), {
  categoryLabel: 'title',
  categoryValue: 'value',
  itemLabel: 'title',
  itemValue: 'value',
  joinKey: 'types'
})
console.log("selectDialogbase",props)
const selectCategory = ref(0)
watch(selectCategory, (newValue) => {
  console.log("selectCategory",newValue)
})

const selected=defineModel({
  default:0
})

const handleSelect = (index: number) => {
  console.log(`choose ${index}`)
  selected.value = index
}
</script>

<template>
  <v-btn class="mx-auto mb-2" variant="flat" color="primary">风格选择
    <v-dialog activator="parent" max-width="80%">
      <template v-slot:default="{ isActive }">
        <v-card rounded="lg">
          <v-card-title class="d-flex justify-space-between align-center">
            <div class="text-h6 font-weight-bold text-medium-emphasis ps-2">
              选择模型
            </div>
            <!--关闭按钮-->
            <v-btn
                icon="mdi-close"
                variant="text"
                @click="isActive.value = false"
            ></v-btn>
          </v-card-title>
          <v-card-text class="pt-0">
            <!--                      标签组-->
            <div class="pb-4">
              <v-chip-group
                  selected-class="text-primary"
                  column
                  filter
                  v-model="selectCategory"
              >
                <v-chip
                >
                  所有
                </v-chip>
                <v-chip
                    v-for="(categroy,index) in categroies"
                    :value="categroy[categoryValue]+1"
                >
                  {{ categroy[categoryLabel] }}
                </v-chip>
              </v-chip-group>
            </div>

            <!--                      模型列表-->
            <v-item-group
                v-model="selected"
            >
              <v-row>
                <v-col
                    v-for="(item,index) in items"
                    :key="item[itemValue]"
                    :value="item[itemValue]"
                    cols="6"
                    md="3"
                    v-show="item[joinKey].includes(selectCategory-1) ||  selectCategory==0"
                >
                  <v-hover>
                    <template v-slot="{ isHovering, props }">
                      <v-item v-slot="{ isSelected, toggle}">
                        <v-card class="v-card-custom"
                                :class="{ 'on-hover': isHovering }"
                                :elevation="isHovering ? 12 : 2"
                                v-bind="props"
                                @click="handleSelect(item[itemValue])"
                        >
                          <v-img
                              :src="item['cover']"
                              class="text-right pa-2"
                              :elevation="isHovering ? 12 : 2"
                          >
                            <v-btn :icon="isSelected ? 'mdi-heart' : 'mdi-heart-outline'"
                            ></v-btn>
                          </v-img>
                          <v-card-subtitle>{{ item[itemLabel] }}</v-card-subtitle>
                        </v-card>
                      </v-item>
                    </template>
                  </v-hover>

                </v-col>
              </v-row>
            </v-item-group>
          </v-card-text>


          <v-divider></v-divider>

          <v-card-actions class="my-2 d-flex justify-end">
            <v-btn
                class="text-none"
                rounded="xl"
                text="取消"
                @click="isActive.value = false"
            ></v-btn>

            <v-btn
                class="text-none"
                color="primary"
                rounded="xl"
                text="保存"
                variant="flat"
                @click="isActive.value = false"
            ></v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-dialog>
  </v-btn>
</template>

<style scoped lang="scss">
.v-card-custom {
  transition: opacity .4s ease-in-out;
}

.v-card-custom:not(.on-hover) {
  opacity: 0.6;
}

.show-btns {
  color: rgba(255, 255, 255, 1) !important;
}
</style>